<template>
  <div class="rose-chart" id="roseChart"></div>
</template>

<script>
import * as echarts from "echarts";
import { computedSize } from "../components/computedSize";

export default {
  props: {
    pageConfig: Object,
    // fontSizeConfig: Object,
  },
  data() {
    return {
      fontSizeConfig: {
        roseTitleFontsize: 18,
        roseSubTitleFontsize: 12,
        roseLegendFont: 12,
      },
    };
  },
  mounted() {
    this.computedSizeData();
    this.initRoseChart();

    window.addEventListener("resize", () => {
      this.computedSizeData();
      this.initRoseChart();
    })
  },
  methods: {
    computedSizeData() {
      const { roseTitleFontsize, roseSubTitleFont, roseLegendFont } = computedSize();
      this.fontSizeConfig = {
        roseTitleFontsize: roseTitleFontsize,
        roseSubTitleFontsize: roseSubTitleFont,
        roseLegendFont: roseLegendFont,
      };
    },
    initRoseChart() {
      const roseChart = echarts.init(document.getElementById("roseChart"));
      window.addEventListener("resize", () => {
        roseChart.resize();
      });

      // 颜色系列
      const colorList = ["#1FC6FF", "#59FFFF", "#F5E74F", "#FF386B"];
      const colorList1 = [
        "rgba(31, 198, 255, 0.2)",
        "rgba(31, 198, 255, 0.56)",
        "#404832",
        "#431E3B",
      ];

      const data = [
        { value: 1048, name: "1天未处理" },
        { value: 735, name: "2天未处理" },
        { value: 580, name: "3天未处理" },
        { value: 484, name: "3天以上未处理" },
      ];
      // 公用调整
      let itemStyle = {
        normal: {
          // borderRadius: 4,
          borderColor: "#041125",
          borderWidth: 4,
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
      };

      // 公用调整
      let itemStyle1 = {
        normal: {
          // borderRadius: 4,
          borderColor: "#041125",
          borderWidth: 4,
          color: function (params) {
            return colorList1[params.dataIndex];
          },
        },
      };
      const option = {
        // backgroundColor: "#041125",
        title: {
          // text: "30000单",
          text: "{a|3000} {b|单}\n\n{c|未处理总数}",
          x: "18%",
          y: "35%",
          textStyle: {
            rich: {
              a: {
                color: "#fff",
                textShadowColor: "rgba(245, 231, 79, 0.5)",
                // fontSize: 18,
                fontSize: this.fontSizeConfig.roseTitleFontsize,
                fontFamily: "TCloudNumber",
                align: "center",
              },
              b: {
                fontSize: this.fontSizeConfig.roseSubTitleFontsize,
                color: "#fff",
                align: "center",
              },
              c: {
                fontSize: this.fontSizeConfig.roseSubTitleFontsize,
                color: "#fff",
                align: "center",
              },
            },
          },
        },

        legend: {
          // backgroundColor: "#041125",
          top: "center",
          right: "1%",
          itemHeight: 12,
          itemWidth: 12,
          y: "20%",
          width: 20,
          padding: [50, 20, 20],
          textStyle: {
            rich: {
              one: {
                // width: 100,
                height: 30,
                color: "#fff",
                fontSize: this.fontSizeConfig.roseLegendFont,
              },
              two: {
                // width: 60,
                height: 30,
                color: "#fff",
                fontSize: this.fontSizeConfig.roseLegendFont,
                // backgroundColor: { // 图标
                //   image: chartIcon[4]
                // },
                // align: "left",

                //  color: {
                //   type: 'linear',
                //   steps: ['#FFFFFF', '#53B5FD'],
                // },
              },
              three: {
                // width: 30,
                height: 30,
                color: "#fff",
                fontSize: this.fontSizeConfig.roseSubTitleFontsize,
              },
            },
          },
          formatter: (name) => {
            var total = 0;
            var target;
            var rate;
            for (var i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                target = data[i].value;
              }
              rate = (total / target).toFixed(2);
            }
            return `{one|${name}:} {two|${target}} {three|${"单"}}`;
            // return `{one|${name}} {two|${target}} {three|${rate}%}`;
          },
        },
        series: [
          {
            type: "pie",
            radius: ["66%", "78%"],
            center: ["28%", "50%"],
            hoverAnimation: false,
            startAngle: 90,
            minAngle: 5,
            emphasis: {
              scale: true,
              scaleSize: 15,
              focus: "series",
              blurScope: "coordinateSystem",
              label: {
                show: false,
              },
            },
            labelLine: {
              show: false,
              lineStyle: {
                width: 3,
              },
              normal: {
                length: 30, // 指示线长度
                length2: 30,
              },
            },
            label: {
              show: false,
              formatter: "{name|{b}：}" + "{value|{d}}",
              rich: {
                percentage: {
                  fontSize: 16,
                  fontFamily: "微软雅黑",
                  color: "#ffffff",
                },
                name: {
                  fontFamily: "微软雅黑",
                  fontSize: 16,
                  color: "#fff",
                  lineHeight: 30,
                },
              },
            },
            itemStyle: itemStyle,
            data: data,
            z: 1,
          },
          {
            type: "pie",
            radius: ["40%", "62%"],
            center: ["28%", "50%"],
            hoverAnimation: false,
            startAngle: 90,
            minAngle: 5,
            emphasis: {
              scale: false,
              scaleSize: 15,
              focus: "series",
              blurScope: "coordinateSystem",
            },
            label: {
              show: false,
            },
            itemStyle: itemStyle1,
            data: data,
            z: 2,
          },
          // 最外圈细圆环线条
          {
            type: "pie",
            radius: ["95%", "95.8%"],
            center: ["28%", "50%"],
            // radius: '90%',
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                shadowBlur: 1,
                shadowColor: "rgba(15, 79, 150,0.61)",
                // color: "rgba(23,138,173,1)",
                color: "rgba(15, 120, 255, 0.24)",
                lineWidth: 2,
              },
            },
            label: {
              show: false,
            },
            data: [0],
          },
          {
            type: "pie",
            radius: ["95%", "96.2%"],
            center: ["28%", "50%"],
            // radius: '90%',
            hoverAnimation: false,
            clockWise: false,
            color: [
              "#55c2e200",
              "rgba(26, 131, 182, 1)",
              "#ff5a6100",
              "ff5a6100",
            ],
            label: {
              show: false,
            },
            data: [140, 60, 240, 130],
            // data: [30,30,30,30,30,30],
          },
          {
            // name: "ring1",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() * 0.28,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2.3,
                  startAngle: (250 * Math.PI) / 180,
                  endAngle: (210 * Math.PI) / 180,
                },
                style: {
                  stroke: "rgba(15, 120, 255, 0.24)",
                  fill: "transparent",
                  lineWidth: 1,
                },
                silent: true,
              };
            },
            data: [0],
          },
        ],
        // graphic: [
        //   {
        //     type: "rect", // 或者其他形状
        //     left: "center",
        //     top: "middle",
        //     shape: {
        //       width: 400, // 根据需要调整大小
        //       height: 400, // 根据需要调整大小
        //     },
        //     style: {
        //       fill: "transparent", // 设置为透明，以便下面的 HTML 元素可见
        //     },
        //     children: [
        //       {
        //         type: "html", // 使用 HTML 类型
        //         style: {
        //           // 这里可以设置样式，但不常用，因为通常HTML元素的样式在CSS中设置
        //         },
        //         content: '<div style="color: red;">Hello, ECharts!</div>', // 你的HTML内容
        //       },
        //     ],
        //   },
        // ],
      };

      roseChart.setOption(option);
      roseChart.on("click", (params) => {
        console.log(params.name);
        this.$emit("handleOpenUnDealNum", params.name);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.rose-chart {
  width: 100%;
  height: 100%;
}

::v-deep .legend-item {
  display: flex;
  align-items: center;
  .legend-name {
    font-size: 12px;
    color: red;
  }
}
</style>


